<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title th:text="${title}"></title>
    <link rel="icon" href="/global/img/core-img/favicon.ico">
    <link rel="stylesheet" href="/global/video-js/video-js.min.css">
    <link rel="stylesheet" href="/global/css/style.css">
    <link rel="stylesheet" href="/global/css/log.css">
</head>
<body>
<div th:include="public::topbar"></div>
<div id="errinfo" class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span>Java script is not running, please check your browser settings and refreshes page</span>
</div>
<div class="single-blog-wrapper section-padding-0-100">
    <div class="single-blog-area blog-style-2 mb-50">
        <div class="single-blog-thumbnail">
            <img th:src="${log.cover}" alt="">
            <div class="post-tag-content">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="post-date">
                                <a th:utext="${'<span>' + log.year + '</span>' + log.day + '<span>' + log.month +'</span>'}"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-8 col-lg-9">
                <div class="single-blog-area blog-style-2 mb-50">
                    <div class="single-blog-content">
                        <div class="line"></div>
                        <a th:href="${'/blog/cate?cid=' + log.category.cid}" class="post-tag"
                           th:text="${log.category.desc}"></a>
                        <h4><a th:text="${title}" class="post-headline mb-0" th:value="${log.id}"></a></h4>
                        <div class="post-meta mb-50">
                            <p>By <a th:text="${author.name}"></a></p>
                            <p th:text="${log.replies_count + ' comments'}"></p>
                        </div>
                        <div th:utext="${context}"></div>
                    </div>
                </div>
                <div class="d-flex" th:if="${log_id != null}">
                    <div class="btn-group ml-auto">
                        <button type="button" class="btn original-btn mr-1" id="btn_edit" th:data-id="${log_id}">
                            Edit
                        </button>
                        <button type="button" class="btn danger-btn" data-toggle="modal" data-target="#deletemodal">
                            Delete
                        </button>
                    </div>
                </div>
                <div class="blog-post-author mt-100 d-flex">
                    <div class="author-thumbnail">
                        <img th:src="${'/api/user/account/avatar/' + author.uid}"/>
                    </div>
                    <div class="author-info">
                        <div class="line"></div>
                        <span class="author-role">Author</span>
                        <h4>
                            <a th:if="${author.uid != 0}" th:href='${"/author?id=" + author.uid}' class="author-name" th:text="${author.name}"></a>
                            <a th:if="${author.uid == 0}" class="author-name" th:text="${author.name}"></a>
                        </h4>
                        <p th:text="${author.autoDetectResume()}"></p>
                    </div>
                </div>
                <div id="comments">
                    <div th:fragment="reply-list" class="comment_area clearfix mt-70" th:if="${replies.size() > 0}">
                        <h5 class="title">Comments</h5>
                        <ol>
                            <li class="single_comment_area" th:each="reply:${replies}">
                                <div class="comment-content d-flex">
                                    <div class="comment-author">
                                        <img th:src='${"/global/img/bg-img/" + reply.avatar + ".jpg"}'>
                                    </div>
                                    <div class="comment-meta">
                                        <a class="post-date"
                                           th:utext="${'<span>' + reply.year + '/<span>' + reply.month + '/</span>' + reply.day +'</span>'}"></a>
                                        <p><a class="post-author" th:text="${reply.username}"></a></p>
                                        <p th:text="${reply.desc}"></p>
                                    </div>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="post-a-comment-area mt-70">
                    <h5>Leave a reply</h5>
                    <div class="row">
                        <div class="col-12 col-md-6">
                            <div class="group">
                                <input type="text" name="name" required th:value="${reply_name}">
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>Name</label>
                            </div>
                        </div>
                        <div class="col-12 col-md-6">
                            <div class="group">
                                <input type="email" name="email" required th:value="${reply_email}">
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>Email</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="group">
                                <textarea name="message" required></textarea>
                                <span class="highlight"></span>
                                <span class="bar"></span>
                                <label>Comment</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="button" class="btn original-btn">Reply</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 col-lg-3" th:include="public::sidebar"></div>
        </div>
    </div>
</div>
<div th:include="public::bottombar"></div>
<div class="subscribe-newsletter-area">
    <div class="modal fade" id="deletemodal" tabindex="-1" th:if="${log_id != null}">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <div class="modal-body">
                    <h5 class="title">Are you absolutely sure?</h5>
                    <div class="newsletterForm">
                        <ul class="list-inline mb-4">
                            <li class="list-inline-item">This action cannot be</li>
                            <li class="list-inline-item text-danger">UNDONE.</li>
                            <li class="list-inline-item">This will permanently</li>
                            <li class="list-inline-item text-danger">DELETE</li>
                            <li class="list-inline-item text-primary" th:text="${title}"></li>
                        </ul>
                        <button type="button" class="btn danger-btn btn-type" th:data-id="${log_id}" disabled="disabled"
                                id="btn_delete">Delete
                        </button>
                        <button type="button" class="btn original-btn btn-type" data-dismiss="modal">Close</button>
                    </div>
                    <div class="mt-4">
                        <input id="cb_delete" type="checkbox" name="colors" value="blue"/>
                        <label for="cb_delete" class="ml-2">I understand the danger of this operation</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/global/js/jquery-2.2.4.min.js"></script>
<script src="/global/js/popper.min.js"></script>
<script src="/global/bootstrap/js/bootstrap.min.js"></script>
<script src="/global/video-js/video.min.js"></script>
<script src="/global/video-js/videojs-contrib-hls.min.js"></script>
<script src="/global/js/plugins.js"></script>
<script src="/global/js/active.min.js"></script>
<script src="/global/js/logshow.min.js"></script>
<script src="/global/js/events.min.js"></script>
</body>
</html>